<template>
  <div>
    <div class="p3-agreement">
      <div class="p3-a-list">
        <div class="p3-a-l-property">
          <p>总资产折合</p>
          <div>
            <span>{{asset.amount}} USDT</span>
            <el-tooltip effect="dark" :content="asset.rmbAmount.toString()" placement="top">
              <span class="over">≈￥{{Number(asset.rmbAmount)}}</span>
            </el-tooltip>
          </div>
        </div>
        <div class="p3-a-l-market">
          <p>合约市场</p>
          <div>
            <ul class="p3-m-list">
              <li>交易对</li>
              <li>最新价</li>
              <li>涨幅</li>
            </ul>
            <ul
              @click="clickAgreeList(v,i)"
              v-for="(v,i) in agreeList"
              :key="i"
              class="p3-m-list p3-deal"
            >
              <li>{{v.childCoinName}}/USDT</li>
              <li>{{v.dataOne.close}}</li>
              <li
                :class="v.dataOne.riseAndfall>0?'p3-green':'p3-red'"
              >{{(v.dataOne.riseAndfall*100).toFixed(4)}}%</li>
            </ul>
          </div>
          <div class="p3-intro nui-scroll">
            {{message.simpleIntroduction}}
          </div>
        </div>
      </div>
      <div class="p3-k">
        <!-- k线 -->
        <div class="p3-k-time">
          <ul class="p3-k-t-title">
            <li>
              <span>{{agreeTitle.childCoinName}}/USDT</span>
            </li>
            <li>
              <p :class="agreeTitle.riseAndfall>0?'p3-green':'p3-red'">{{agreeTitle.close}}</p>
            </li>
            <li>
              <p>涨跌幅</p>
              <p
                :class="agreeTitle.riseAndfall>0?'p3-green':'p3-red'"
              >{{(agreeTitle.riseAndfall*100).toFixed(4)}}%</p>
            </li>
            <li>
              <p>最高价</p>
              <p>{{agreeTitle.high}}</p>
            </li>
            <li>
              <p>最低价</p>
              <p>{{agreeTitle.low}}</p>
            </li>
            <li>
              <p>24H量</p>
              <p>{{agreeTitle.volume}}</p>
            </li>
          </ul>
          <div
            id="p3-kline"
            v-loading="kload"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
          >
            <!-- k线图 -->
            <iframe
              id="tradingViews"
              width="100%"
              height="400px"
              src="static/charting_library-master/agreement.html"
              frameborder="0"
            ></iframe>
          </div>
          <div id="p3-business">
            <div class="p3-business-title">
              <div class="p3-b-left">
                <span @click="entrustType = true" :class="entrustType?'b-currentColor':''">限价委托</span>
                <span @click="entrustType=false" :class="!entrustType?'b-currentColor':''">市价委托</span>
              </div>
              <div class="p3-b-right">
                <span
                  v-if="leverStatus==undefined?false:true"
                >1张({{leverStatus.unit || ''}}{{agreeTitle.childCoinName}})</span>
                <span v-else>--张</span>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <span class="p3-b-mul">{{multiple}}X</span>
                  </span>
                  <el-dropdown-menu v-if="leverStatus==undefined?false:true" slot="dropdown">
                    <el-dropdown-item
                      v-for="(v,i) in (leverStatus.levers || '').split(',')"
                      :key="i"
                      @click.native="getMultiple(v)"
                    >{{v}}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
            <div class="p3-business-center">
              <ul class="p3-b-c-left">
                <li>
                  <el-input
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    v-if="entrustType"
                    size="small"
                    placeholder="买入价"
                    v-model="buy.price"
                  >
                    <template slot="append">USDT</template>
                  </el-input>
                  <el-input v-else :disabled="true" size="small" placeholder="以市场最优价格买入">
                    <template slot="prepend">价格</template>
                    <template slot="append">USDT</template>
                  </el-input>
                </li>
                <li>
                  <el-input
                    oninput="value=value.replace(/^0(0+)|[^\d]+/g,'')"
                    size="small"
                    placeholder="买入量"
                    v-model="buy.amount "
                  >
                    <template slot="append">张</template>
                  </el-input>
                </li>
                <li>
                  <div class="p3-money">
                    <span>可用：{{asset.availableAmount}} USDT</span>
                    <span>手续费：{{buyWatch.fee}} USDT</span>
                  </div>
                </li>
                <li>
                  <div class="p3-choose">
                    <el-input
                      oninput="value=value.replace(/[^\d.]/g,'')"
                      style="width:45%"
                      size="small"
                      v-model="buy.takeProfit"
                      placeholder="止盈价(选填)"
                    ></el-input>
                    <el-input
                      oninput="value=value.replace(/[^\d.]/g,'')"
                      style="width:45%"
                      size="small"
                      v-model="buy.stopLoss"
                      placeholder="止损价(选填)"
                    ></el-input>
                  </div>
                </li>
                <li>
                  <div class="p3-money">
                    <span>保证金</span>
                    <span>{{buyWatch.cash}} USDT</span>
                  </div>
                </li>
                <li>
                  <el-button
                    :loading="buyLoad"
                    v-if="leverStatus!=undefined"
                    @click.native="buyMore"
                    size="small"
                    class="p3-buy"
                  >买入开多</el-button>
                  <el-button v-else disabled size="small" type="info" style="width:100%">暂无开放</el-button>
                </li>
              </ul>
              <ul class="p3-b-c-right">
                <li>
                  <el-input
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    v-if="entrustType"
                    size="small"
                    placeholder="卖出价"
                    v-model="sell.price"
                  >
                    <template slot="append">USDT</template>
                  </el-input>
                  <el-input v-else :disabled="true" size="small" placeholder="以市场最优价格买入">
                    <template slot="prepend">价格</template>
                    <template slot="append">USDT</template>
                  </el-input>
                </li>
                <li>
                  <el-input
                    oninput="value=value.replace(/^0(0+)|[^\d]+/g,'')"
                    size="small"
                    placeholder="卖出量"
                    v-model="sell.amount"
                  >
                    <template slot="append">张</template>
                  </el-input>
                </li>
                <li>
                  <div class="p3-money">
                    <span>可用：{{asset.availableAmount}} USDT</span>
                    <span>手续费：{{sellWatch.fee}} USDT</span>
                  </div>
                </li>
                <li>
                  <div class="p3-choose">
                    <el-input
                      oninput="value=value.replace(/[^\d.]/g,'')"
                      style="width:45%"
                      size="small"
                      v-model="sell.takeProfit"
                      placeholder="止盈价(选填)"
                    ></el-input>
                    <el-input
                      oninput="value=value.replace(/[^\d.]/g,'')"
                      style="width:45%"
                      size="small"
                      v-model="sell.stopLoss"
                      placeholder="止损价(选填)"
                    ></el-input>
                  </div>
                </li>
                <li>
                  <div class="p3-money">
                    <span>保证金</span>
                    <span>{{sellWatch.cash}}USDT</span>
                  </div>
                </li>
                <li>
                  <el-button
                    :loading="sellLoad"
                    v-if="leverStatus!=undefined"
                    @click.native="sellEmpty"
                    size="small"
                    class="p3-sell"
                  >卖出开空</el-button>
                  <el-button v-else disabled size="small" type="info" style="width:100%">暂无开放</el-button>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 盘口部分 -->
        <div class="p3-k-handicap">
          <!-- 盘口 -->
          <div class="p3-k-h-asset">
            <div class="p3-k-h-a-title">
              <span>盘口</span>
            </div>
            <ul>
              <li>价格(USDT)</li>
              <li>数量(张)</li>
              <li>累计(张)</li>
            </ul>
            <div v-show="buySellStatus==1" class="p3-k-h-none">
              <div class="p3-list-red">
                <ul
                  v-for="(v,i) in handicapList.sell.slice(handicapList.sell.length-11,handicapList.sell.length)"
                  :key="i"
                >
                  <li style="cursor:pointer" @click="getHandicPrice(v.price)" class="p3-red">{{v.price}}</li>
                  <li>{{v.amount}}</li>
                  <li>{{v.totalAmount}}</li>
                  <div class="bg-red">
                    <div
                      :style="{width:(v.totalAmount-v.amount)/v.totalAmount*250+'px'}"
                      class="bg-red-start"
                    ></div>
                  </div>
                </ul>
              </div>
              <div class="p3-current">
                <p :class="agreeTitle.riseAndfall>0?'p3-green':'p3-red'">
                  {{agreeTitle.close}}
                  <span
                    style="color:#a1b1b0"
                  >≈ ￥{{(Number(agreeTitle.close)*Number(asset.cnyRate)).toFixed(2)}}</span>
                </p>
              </div>
              <div class="p3-list-green">
                <ul v-for="(v,i) in handicapList.buy.slice(0,11)" :key="i">
                  <li style="cursor:pointer" @click="getHandicPrice(v.price)" class="p3-green">{{v.price}}</li>
                  <li>{{v.amount}}</li>
                  <li>{{v.totalAmount}}</li>
                  <div class="bg-green">
                    <div
                      :style="{width:(v.totalAmount-v.amount)/v.totalAmount*250+'px'}"
                      class="bg-green-start"
                    ></div>
                  </div>
                </ul>
              </div>
            </div>
            <div v-show="buySellStatus==2" class="p3-k-h-list nui-scroll">
              <div class="p3-list-green">
                <ul v-for="(v,i) in handicapList.buy" :key="i">
                  <li style="cursor:pointer" @click="getHandicPrice(v.price)" class="p3-green">{{v.price}}</li>
                  <li>{{v.amount}}</li>
                  <li>{{v.totalAmount}}</li>
                  <div class="bg-green">
                    <div
                      :style="{width:(v.totalAmount-v.amount)/v.totalAmount*250+'px'}"
                      class="bg-green-start"
                    ></div>
                  </div>
                </ul>
              </div>
            </div>
            <div v-show="buySellStatus==3" class="p3-k-h-list nui-scroll">
              <div class="p3-list-red">
                <ul v-for="(v,i) in handicapList.sell" :key="i">
                  <li style="cursor:pointer" @click="getHandicPrice(v.price)" class="p3-red">{{v.price}}</li>
                  <li>{{v.amount}}</li>
                  <li>{{v.totalAmount}}</li>
                  <div class="bg-red">
                    <div
                      :style="{width:(v.totalAmount-v.amount)/v.totalAmount*250+'px'}"
                      class="bg-red-start"
                    ></div>
                  </div>
                </ul>
              </div>
            </div>
            <ul style="margin-top:20px">
              <li @click="buySellStatus=1" style="color:#DBB783">买卖盘</li>
              <li @click="buySellStatus=2" class="p3-green">买盘</li>
              <li @click="buySellStatus=3" class="p3-red">卖盘</li>
            </ul>
          </div>
          <!-- 实时成交 -->
          <div class="p3-k-h-deal">
            <div class="p3-k-h-d-title">
              <span>实时成交</span>
            </div>
            <ul>
              <li>时间</li>
              <li>价格(USDT)</li>
              <li>数量(张)</li>
            </ul>
            <div class="p3-k-h-d-list nui-scroll">
              <ul v-for="(v,i) in bargainList" :key="i">
                <li>{{v.date.split(' ')[1]}}</li>
                <li :class="v.type==2?'p3-red':'p3-green'">{{v.price}}</li>
                <li>{{v.amount}}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <agreementTable ref="agreementTable"></agreementTable>
  </div>
</template>
<script>
import agreementTable from "../../components/agreementTable/agreementTable";
import $ from "jquery";
import {
  contractWalletGet,
  get24hrDataForAgreement,
  getBuySellContractData,
  getDealRecordContract,
  getContract,
  getExchangeRateByCoinName,
  contractAdd,
  getCoinInfoByName
} from "../../api/api";
import { mapState } from "vuex";
import qs from "qs";
export default {
  name: "agreement",
  data() {
    return {
      asset: {
        amount: "",
        rmbAmount: "",
        availableAmount: "",
        cnyRate: ""
      },
      agreenInit: 0,
      agreeList: [],
      agreeTitle: [],
      handicapList: {
        buy: [],
        sell: []
      },
      bargainList: [],
      entrustType: true, //限价市价
      kload: false, //k线加载
      buySellStatus: 1, //盘口
      multiple: "--", //倍数
      leverStatus: [], //倍数和是否可交易
      // -------------------------------
      buyLoad: false,
      buyWatch: {
        cash: 0,
        fee: 0
      },
      buy: {
        price: "",
        amount: "",
        takeProfit: "",
        stopLoss: ""
      },
      sellLoad: false,
      sellWatch: {
        cash: 0,
        fee: 0
      },
      sell: {
        price: "",
        amount: "",
        takeProfit: "",
        stopLoss: ""
      },
      message:[],
    };
  },
  computed: {
    ...mapState(["token","time"])
  },
  watch: {
    time(){
      this.getRate();
    },
    //实时刷新
    agreeTitle() {
      this.getHandicap(); //盘口
      this.getBargain(); //实时成交
    },
    //清除input数据
    entrustType() {
      this.buy.amount = "";
      this.buy.takeProfit = "";
      this.buy.stopLoss = "";
      this.sell.amount = "";
      this.sell.takeProfit = "";
      this.sell.stopLoss = "";
    },
    //监听数量
    "buy.amount"() {
      if (this.leverStatus != undefined) {
        this.buyWatch.cash = (
          (this.agreeTitle.close *
            this.leverStatus.unit *
            Number(this.buy.amount)) /
          Number(this.multiple)
        ).toFixed(2);
        this.buyWatch.fee = (
          (this.agreeTitle.close *
            this.leverStatus.unit *
            Number(this.buy.amount) *
            this.leverStatus.feeRatio) /
          1000
        ).toFixed(2);
      }
    },
    "sell.amount"() {
      if (this.leverStatus != undefined) {
        this.sellWatch.cash = (
          (this.agreeTitle.close *
            this.leverStatus.unit *
            Number(this.sell.amount)) /
          Number(this.multiple)
        ).toFixed(2);
        this.sellWatch.fee = (
          (this.agreeTitle.close *
            this.leverStatus.unit *
            Number(this.sell.amount) *
            this.leverStatus.feeRatio) /
          1000
        ).toFixed(2);
      }
    },
    //监听小数位
    "buy.price"() {
      this.buy.price = this.decimalControl(this.buy.price.toString());
    },
    "buy.takeProfit"() {
      this.buy.takeProfit = this.decimalControl(this.buy.takeProfit.toString());
    },
    "buy.stopLoss"() {
      this.buy.stopLoss = this.decimalControl(this.buy.stopLoss.toString());
    },
    "sell.price"() {
      this.sell.price = this.decimalControl(this.sell.price.toString());
    },
    "sell.takeProfit"() {
      this.sell.takeProfit = this.decimalControl(
        this.sell.takeProfit.toString()
      );
    },
    "sell.stopLoss"() {
      this.sell.stopLoss = this.decimalControl(this.sell.stopLoss.toString());
    }
  },
  components: {
    agreementTable
  },
  created() {
    window.localStorage.setItem("timer3", 1);
    this.getRate(); //资产
    this.getAgreeList(); //合约列表
    //合约列表定时刷新
    var timer = setInterval(() => {
      if (window.localStorage.getItem("timer3") == 2) {
        clearInterval(timer);
      }
      this.getAgreeListCircle();
    }, 5000);
  },
  methods: {
    //获取币种详情
    getBContent(val){
      var params = {
        coinName:val
      }
      getCoinInfoByName(params).then(res=>{
        this.message = res.data.data
        console.log(this.message,66666)
      })
    },
    //获取资产
    getAsset() {
      var params = {
        token: this.token
      };
      contractWalletGet(qs.stringify(params)).then(res => {
        this.asset.availableAmount = res.data.data.availableAmount;
        this.asset.amount =this.$getBeforeDate.addFun(Number(res.data.data.availableAmount),Number(res.data.data.freezeAmount))
        this.asset.rmbAmount = this.$getBeforeDate.mulFun(this.asset.amount , this.asset.cnyRate);
      });
    },
    //获取汇率
    getRate() {
      getExchangeRateByCoinName({
        childCoinName: "USDT"
      }).then(res => {
        this.asset.cnyRate = res.data.data.coinRate;
        this.getAsset();
      });
    },
    //获取合约列表
    getAgreeList() {
      get24hrDataForAgreement().then(res => {
        this.agreeList = res.data.data;
        this.$store.commit('getAgreeList',JSON.stringify(res.data.data))
        this.agreeTitle = {
          ...res.data.data[this.agreenInit],
          ...res.data.data[this.agreenInit].dataOne
        };
        this.$store.commit("getContractId", this.agreeTitle.contractId);
        this.buy.price = this.agreeTitle.close;
        this.sell.price = this.agreeTitle.close;
        this.getContractStatus(); //获取合约状态和杠杆
        this.getBContent(this.agreeList[0].childCoinName)
      });
    },
    //循环合约列表
    getAgreeListCircle() {
      get24hrDataForAgreement().then(res => {
        this.agreeList = res.data.data;
        this.$store.commit('getAgreeList',JSON.stringify(res.data.data))
        this.agreeTitle = {
          ...res.data.data[this.agreenInit],
          ...res.data.data[this.agreenInit].dataOne
        };
        // this.buy.price = this.agreeTitle.close
        // this.sell.price = this.agreeTitle.close
      });
    },
    //获取合约状态和杠杆
    getContractStatus() {
      var params = {
        token: this.token,
        tradeCoinId: this.agreeTitle.childCoin
      };
      getContract(qs.stringify(params)).then(res => {
        this.leverStatus = res.data.data; //（undefined）
        if (this.leverStatus != undefined) {
          this.multiple = this.leverStatus.levers.split(",")[0];
        } else {
          this.multiple = "--";
        }
      });
    },
    //获取盘口
    getHandicap() {
      var params = {
        childCoinName: this.agreeTitle.childCoinName,
        motherCoinName: "USDT"
      };
      getBuySellContractData(params).then(res => {
        this.handicapList.buy = res.data.data.buyList;
        this.handicapList.sell = res.data.data.sellList;
      });
    },
    //获取实时成交
    getBargain() {
      var params = {
        childCoinName: this.agreeTitle.childCoinName,
        motherCoinName: "USDT"
      };
      getDealRecordContract(params).then(res => {
        this.bargainList = res.data.data.dealRecordList;
      });
    },
    //小数位控制
    decimalControl(val) {
      if (val.indexOf(".") >= 0) {
        var numLen = val.substring(val.indexOf(".") + 1, val.length).length;
        if (numLen > 6) {
          val = val.substring(0, val.length - 1);
          return val;
        } else {
          return val;
        }
      } else {
        return val;
      }
    },
    // -----点击事件-----------------------------------------------
    //从盘口获取价格
    getHandicPrice(val){
      this.buy.price = val
      this.sell.price = val
    },
    //获取杠杆倍数
    getMultiple(val) {
      this.multiple = val;
    },
    //合约列表点击
    clickAgreeList(val, i) {
      this.agreenInit = i;
      this.agreeTitle = { ...val, ...val.dataOne };
      this.getBContent(this.agreeTitle.childCoinName)
      this.$store.commit("getContractId", this.agreeTitle.contractId);
      this.buy.price = this.agreeTitle.close;
      this.sell.price = this.agreeTitle.close;
      (this.buy.amount = ""),
        (this.buyWatch.cash = 0),
        (this.buyWatch.fee = 0),
        (this.sell.amount = ""),
        (this.sellWatch.cash = 0),
        (this.sellWatch.fee = 0),
        this.getContractStatus(); //获取合约状态和杠杆
        this.$refs.agreementTable.getHold();
          this.$refs.agreementTable.getClose();
          this.$refs.agreementTable.getCurent();
          this.$refs.agreementTable.getHistory();
      $("#tradingViews")[0].contentWindow.window.tvWidget.setSymbol(
        val.childCoinName + "/USDT",
        5
      );
    },
    //买入开多
    buyMore() {
      if (this.buy.price == "" && this.entrustType == true) {
        this.$notify({
          title: "警告",
          message: "买入价不能为空！",
          type: "warning"
        });
        return false;
      }
      if (this.buy.amount == "") {
        this.$notify({
          title: "警告",
          message: "买入量不能为空！",
          type: "warning"
        });
        return false;
      }
      this.buyLoad = true;
      var params = {
        token: this.token,
        contractId: this.agreeTitle.contractId,
        direction: 0,
        tradeType: this.entrustType ? 0 : 1,
        amount: this.buy.amount,
        multiple: this.multiple,
        price: this.entrustType ? this.buy.price : "",
        takeProfit: this.buy.takeProfit,
        stopLoss: this.buy.stopLoss
      };
      contractAdd(qs.stringify(params)).then(res => {
        this.buyLoad = false;
        if (res.data.code == 200) {
          this.getRate(); //资产
          this.$refs.agreementTable.getHold();
          this.$refs.agreementTable.getClose();
          this.$refs.agreementTable.getCurent();
          this.$refs.agreementTable.getHistory();
          this.$notify({
            title: "提示",
            message: "买入成功！",
            type: "success"
          });
        } else {
          this.$notify({
            title: "警告",
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    },
    //卖出开空
    sellEmpty() {
      if (this.sell.price == "" && this.entrustType == true) {
        this.$notify({
          title: "警告",
          message: "卖出价不能为空！",
          type: "warning"
        });
        return false;
      }
      if (this.sell.amount == "") {
        this.$notify({
          title: "警告",
          message: "卖出量不能为空！",
          type: "warning"
        });
        return false;
      }
      this.sellLoad = true;
      var params = {
        token: this.token,
        contractId: this.agreeTitle.contractId,
        direction: 1,
        tradeType: this.entrustType ? 0 : 1,
        amount: this.sell.amount,
        price: this.entrustType ? this.sell.price : "",
        multiple: this.multiple,
        takeProfit: this.sell.takeProfit,
        stopLoss: this.sell.stopLoss
      };
      contractAdd(qs.stringify(params)).then(res => {
        this.sellLoad = false;
        if (res.data.code == 200) {
          this.getRate(); //资产
          this.$refs.agreementTable.getHold();
          this.$refs.agreementTable.getClose();
          this.$refs.agreementTable.getCurent();
          this.$refs.agreementTable.getHistory();
          this.$notify({
            title: "提示",
            message: "卖出成功！",
            type: "success"
          });
        } else {
          this.$notify({
            title: "警告",
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    }
  },
  beforeDestroy() {
    window.localStorage.setItem("timer3", 2);
  }
};
</script>
<style lang='less' scope>
@import url("../../../assets/css/comm.css");
.p3-red {
  color: #ee633e !important;
}
.p3-green {
  color: #0a9187 !important;
}
.p3-agreement {
  background-color: #e3eeee;
  padding: 10px 5px;
  box-sizing: border-box;
  display: flex;
  min-width: 1600px;
  .over {
    display: inline-block;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  > .p3-a-list {
    width: 270px;
    background-color: #f7f8f8;
    .p3-a-l-property {
      background-color: #fff;
      padding: 10px 15px;
      font-size: 12px;
      > p:nth-of-type(1) {
        color: #dbb783;
      }
      > div {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        span:nth-of-type(2) {
          color: #a1b1b0;
        }
      }
    }
    .p3-a-l-market {
      border-top: 1px solid #ebebeb;
      > p:nth-of-type(1) {
        padding: 10px 15px;
        background-color: #fff;
        font-size: 12px;
        color: #dbb783;
      }
      > div:nth-of-type(1) {
        padding: 10px 15px;
        > .p3-m-list {
          display: flex;
          margin-bottom: 10px;
          > li {
            width: 33.33%;
            font-size: 12px;
            color: #a1b1b0;
            cursor: pointer;
          }
          > li:nth-of-type(2),
          > li:nth-of-type(3) {
            text-align: right;
          }
        }
        > .p3-deal {
          > li:nth-of-type(1) {
            color: #364365;
          }
        }
      }
    }
    .p3-intro{
      padding: 15px;
      font-size: 14px;
      max-height: 300px;
      overflow-y: scroll;
    }
  }
  > .p3-k {
    width: calc(100% - 280px);
    width: -moz-calc(100% - 280px);
    width: -webkit-calc (100% - 280px);
    margin-left: 10px;
    display: flex;
    > .p3-k-time {
      width: calc(100% - 540px);
      width: -moz-calc(100% - 540px);
      width: -webkit-calc (100% - 540px);
      > .p3-k-t-title {
        background-color: #fff;
        padding: 10px;
        font-size: 12px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        > li {
          width: 80px;
          > p:nth-of-type(1) {
            color: #a1b1b0;
          }
        }
        > li:nth-of-type(1) {
          > span {
            border-bottom: 1px dashed #0f1c48;
          }
        }
      }
      > #p3-kline {
        height: 400px;
      }
      > #p3-business {
        margin-top: 10px;
        background-color: #f7f8f8;
        // -----------------
        .el-input__inner {
          background-color: #f7f8f8 !important;
          border-right: 0 !important;
        }
        .el-input-group__append,
        .el-input-group__prepend {
          background-color: #f7f8f8 !important;
        }
        // ------------------
        > .p3-business-title {
          background-color: #ffffff;
          padding: 0 10px 0 0;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          > .p3-b-left {
            > span {
              display: inline-block;
              padding: 10px;
              color: #a1b1b0;
              cursor: pointer;
            }
            > .b-currentColor {
              border-bottom: 2px solid #dbb783;
              color: #dbb783 !important;
            }
          }
          > .p3-b-right {
            > span:nth-of-type(1) {
              margin-right: 15px;
            }
            .p3-b-mul {
              background-color: #e4f5f4;
              border-radius: 4px;
              padding: 4px 10px;
              color: #0a9187;
            }
          }
        }
        > .p3-business-center {
          background-color: #f7f8f8;
          display: flex;
          justify-content: space-between;
          > .p3-b-c-left,
          > .p3-b-c-right {
            width: 48%;
            padding: 10px 10px 0;
            > li {
              margin-bottom: 10px;
              > .p3-money {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 12px;
                color: #334d50;
                margin: 5px 0;
              }
              > .p3-choose {
                display: flex;
                justify-content: space-between;
                .el-input__inner {
                  background-color: #ecf0f0 !important;
                  border-right: 1px solid #dcdfe6 !important;
                  text-align: center;
                }
              }
              > .p3-buy {
                width: 100%;
                background: #0a9187 !important;
                border-color: #0a9187 !important;
                color: #ffffff;
              }
            }
          }
          > .p3-b-c-right {
            > li {
              > .p3-sell {
                width: 100%;
                color: #ffffff;
                background: #ee633e !important;
                border-color: #ee633e !important;
              }
            }
          }
        }
      }
    }
    > .p3-k-handicap {
      margin-left: 10px;
      display: flex;
      > .p3-k-h-asset {
        width: 270px;
        background-color: #f7f8f8;
        .p3-k-h-a-title {
          background-color: #fff;
          > span {
            display: inline-block;
            height: 100%;
            color: #dbb783;
            border-bottom: 2px solid #dbb783;
            padding: 15px 10px;
            font-size: 12px;
          }
        }
        > ul:nth-of-type(1) {
          display: flex;
          padding: 15px 10px 10px;
          > li {
            width: 33.33%;
            font-size: 12px;
            color: #a1b1b0;
          }
          > li:nth-of-type(2),
          > li:nth-of-type(3) {
            text-align: right;
          }
        }
        > ul:nth-of-type(2) {
          background-color: #fff;
          padding: 10px;
          display: flex;
          font-size: 12px;
          > li {
            margin-right: 15px;
            cursor: pointer;
          }
        }
        > .p3-k-h-none {
          > .p3-list-red,
          .p3-list-green {
            height: 264px;
            > ul {
              position: relative;
              display: flex;
              padding: 0 10px;
              height: 25px;
              line-height: 25px;
              > li {
                width: 33.33%;
                font-size: 12px;
                color: #a1b1b0;
                z-index: 2;
              }
              > li:nth-of-type(2),
              > li:nth-of-type(3) {
                text-align: right;
                color: #334d50;
              }
              > .bg-red {
                z-index: 1;
                position: absolute;
                width: 250px;
                height: 20px;
                background-color: rgb(240, 196, 196);
                opacity: 0.4;
                .bg-red-start {
                  width: 250px;
                  height: 20px;
                  background-color: #f7f8f8;
                }
              }
              > .bg-green {
                z-index: 1;
                position: absolute;
                width: 250px;
                height: 20px;
                background-color: #0a9187;
                opacity: 0.2;
                .bg-green-start {
                  width: 250px;
                  height: 20px;
                  background-color: #f7f8f8;
                }
              }
            }
          }
          > .p3-current {
            background-color: #fff;
            padding: 15px 10px;
            font-size: 12px;
            font-weight: bold;
            margin: 10px 0 0;
          }
        }
        > .p3-k-h-list {
          overflow-y: scroll;
          height: 580px;
          > .p3-list-red,
          .p3-list-green {
            > ul {
              display: flex;
              padding: 0 10px;
              position: relative;
              height: 25px;
              line-height: 25px;
              > li {
                width: 33.33%;
                font-size: 12px;
                color: #a1b1b0;
                z-index: 2;
              }
              > li:nth-of-type(2),
              > li:nth-of-type(3) {
                text-align: right;
                color: #334d50;
              }
              > .bg-red {
                z-index: 1;
                position: absolute;
                width: 250px;
                height: 20px;
                background-color: rgb(240, 196, 196);
                opacity: 0.4;
                .bg-red-start {
                  width: 250px;
                  height: 20px;
                  background-color: #f7f8f8;
                }
              }
              > .bg-green {
                z-index: 1;
                position: absolute;
                width: 250px;
                height: 20px;
                background-color: #0a9187;
                opacity: 0.2;
                .bg-green-start {
                  width: 250px;
                  height: 20px;
                  background-color: #f7f8f8;
                }
              }
            }
          }
          > .p3-current {
            background-color: #fff;
            padding: 15px 10px;
            font-size: 12px;
            font-weight: bold;
            margin: 10px 0;
          }
        }
      }
      > .p3-k-h-deal {
        width: 270px;
        background-color: #f7f8f8;
        margin-left: 10px;
        > .p3-k-h-d-title {
          background-color: #fff;
          > span {
            display: inline-block;
            height: 100%;
            color: #dbb783;
            border-bottom: 2px solid #dbb783;
            padding: 15px 10px;
            font-size: 12px;
          }
        }
        > ul:nth-of-type(1) {
          display: flex;
          padding: 15px 10px;
          > li {
            width: 33.33%;
            font-size: 12px;
          }
          > li:nth-of-type(2),
          > li:nth-of-type(3) {
            width: 33.33%;
            text-align: right;
          }
        }
        > .p3-k-h-d-list {
          height: 624px;
          overflow-y: scroll;
          > ul {
            display: flex;
            padding: 0 10px 10px;
            > li {
              width: 33.33%;
              font-size: 12px;
              color: #334d50;
            }
            > li:nth-of-type(2),
            > li:nth-of-type(3) {
              width: 33.33%;
              text-align: right;
              color: #334d50;
            }
          }
        }
      }
    }
  }
}
</style>